<template>
  <el-dialog class="abow_dialog" title="新建群聊" width="630px" :visible.sync="createNewChatVisible"
             :close-on-click-modal="false"
             :show-close="false"
             :close-on-press-escape="false"
             @closed="closeD()" >
    <el-form :model="form">
      <el-form-item label="群聊名称">
        <el-input v-model="form.chatName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="群聊成员">
        <br>
        <el-transfer :titles="['所有用户', '新群聊成员']"
                         v-model="userResult"
                         :data="data">
      </el-transfer>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeD()">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getAllUser} from "@/api/user";
import {createNewChat} from "@/api/channel";

export default {
  name: "createNewChat",
  props: ['createNewChatVisible','userInfo'],
  data(){
    return{
      form: {
        chatName: null,
      },
      data: [],
      userResult: [],
      allUserList: [],
    }
  },
  methods: {
    initPage(){
      let _this = this
      getAllUser(this.userInfo.userName)
        .then(response => {
          let allUserList = response.data.data
          _this.allUserList = allUserList
          for(let i in allUserList){
            let formData = {
              key: i,
              label: allUserList[i].nickName
            }
            _this.data.push(formData)
          }
        })
    },
    someoneChangeName(userName, nickName){
      let _this = this
      let allUser = this.allUserList
      for(let i in allUser){
        if(allUser[i].userName == userName){
          _this.allUserList[i].nickName = nickName
          _this.data[i].label = nickName
        }
      }
    },
    closeD(){
      this.form.chatName=''
      this.userResult = []
      let _this = this
      _this.$emit("createNewChatClose", false)
    },
    submit(){
      if(this.form.chatName.trim() == ''){
        this.$message({
          message: '群聊名不能为空字符',
          type: 'warning'
        });
        this.form.chatName = ''
      }else if(this.userResult.length < 1){
        this.$message({
          message: '必须选择群成员',
          type: 'warning'
        });
      }else{
        let result = new Array()
        let userResult = this.userResult
        for(let i in userResult){
          result.push(this.allUserList[userResult[i]].userName)
        }
        result.push(this.userInfo.userName)
        createNewChat(result, this.form.chatName)
            .then(response => {
              let data = response.data
              if(data.code == 200){
                this.$notify({
                  title: '成功',
                  message: data.data,
                  duration: 2500,
                  type: 'success'
                });
              }
            })
        this.closeD()
      }
    },
  },
  mounted() {
    this.initPage()
  },
}
</script>

<style lang="scss" scoped>
.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
</style>